<template>
  <div style="text-align: center;width: 100%;">
    <div class="divier">
      <svg class="icon" style="font-size: 20px;">
        <use v-bind:xlink:href='[icon]'></use>
      </svg>&nbsp;<span style="position: relative;top:-2px">{{text}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['text', 'icon', 'dividerColor', 'textColor'],
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    created () {
      console.log(this.text + '  ' + this.icon)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .divier{
    width: auto;
    text-align: center;
    margin-top: 10px;
    color: darkgray;
  }
  .divier::before{
    content: "";
    background: #b2b2b2;
    position: relative;
    display: inline-block;
    width: 30px;
    height: .5px;
    top:-5px;
    left: -10px;
  }
  .divier::after{
    content: "";
    background: #b2b2b2;
    position: relative;
    display: inline-block;
    width: 30px;
    height: .5px;
    top:-5px;
    left: 0px;
  }
</style>
